<template>
	<view class="flex_fs uni-mt-40">
		<image :src="setting.oss_pub_domain + '/app-img/message/jk.png'" class="user-head"></image>
		<view class="left-message">fdsfsdfds</view>
	</view>
	<view class="flex_fe">
		<view class="flex_fs uni-mt-40">
			<view class="right-message">fdsfsdfds</view>
			<image :src="setting.oss_pub_domain + '/app-img/message/jk.png'" class="user-head"></image>
		</view>
	</view>
	<view class="flex_fs uni-mt-40">
		<image :src="setting.oss_pub_domain + '/app-img/message/jk.png'" class="user-head"></image>
		<view class="left-message">
			<image :src="setting.oss_pub_domain + '/app-img/my/pc.png'" style="width: 304rpx;height: 170rpx;"></image>
			<view class="uni-mt-20">击球打远方案</view>
		</view>
	</view>
	<view class="flex_fe">
		<view class="flex_fs uni-mt-40">
			<view class="right-message">
				<image :src="setting.oss_pub_domain + '/app-img/my/pc.png'" style="width: 304rpx;height: 170rpx;"></image>
				<view class="uni-mt-20">击球打远方案</view>
			</view>
			<image :src="setting.oss_pub_domain + '/app-img/message/jk.png'" class="user-head"></image>
		</view>
	</view>
	<view class="flex_fs uni-mt-40">
		<image :src="setting.oss_pub_domain + '/app-img/message/jk.png'" class="user-head"></image>
		<view class="left-message flex_sbc" style="width: 200rpx;">
			<image :src="setting.oss_pub_domain + '/app-img//message/icon_shut.png'" class="icon-size"></image>
			<view>20''</view>
		</view>
	</view>
	<view class="flex_fe">
		<view class="flex_fs uni-mt-40">
			<view class="right-message flex_sbc" style="width: 200rpx;">
				<view>20''</view>
				<image :src="setting.oss_pub_domain + '/app-img/message/icon_shut.png'" class="icon-size" style="transform: rotate(180deg);"></image>
			</view>
			<image :src="setting.oss_pub_domain + '/app-img/message/jk.png'" class="user-head"></image>
		</view>
	</view>
	<view></view>
	<view class="bottom-box">
		<view class="input-box flex_sbc">
			<view class="input flex_fsc">
				<image v-if="!keyboarHeight && !content" :src="setting.oss_pub_domain + '/app-img/icon/icon_edit-grey.png'" class="icon-size uni-mr-10"></image>
				<textarea v-model="content" auto-height placeholder="说点什么吧..." placeholder-class="uni-placeholder" confirm-type="send" :cursor-spacing="100"></textarea>
			</view>
			<view>
				<view v-if="keyboarHeight" class="send-button">发送</view>
				<image v-else :src="setting.oss_pub_domain + '/app-img/message/icon_add.png'" class="add-icon" @click="setToolHeight"></image>
			</view>
		</view>
		<view :style="{height: toolsHeight + 'rpx'}" style="transition: all .5s;">
			<view class="tools-box flex_sac">
				<view class="text-c">
					<image :src="setting.oss_pub_domain + '/app-img/message/icon_picture.png'" class="item-img"></image>
					<view class="z-font-24">相册</view>
				</view>
				<view class="text-c">
					<image :src="setting.oss_pub_domain + '/app-img/message/icon_camera.png'" class="item-img"></image>
					<view class="z-font-24">拍摄</view>
				</view>
				<view class="text-c">
					<image :src="setting.oss_pub_domain + '/app-img/message/icon_expression.png'" class="item-img"></image>
					<view class="z-font-24">方案</view>
				</view>
				<view class="text-c" @click="voice">
					<image :src="setting.oss_pub_domain + '/app-img/message/icon_voice.png'" class="item-img"></image>
					<view class="z-font-24">语音</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onShow, onHide } from '@dcloudio/uni-app'
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance()
const keyboarHeight = ref(0)
// #ifdef APP-PLUS
const keyboarListener = res => {
	keyboarHeight.value = res.height
}
uni.onKeyboardHeightChange(keyboarListener)
onHide(() => {
	uni.offKeyboardHeightChange(keyboarListener)
})
// #endif

const toolsHeight = ref(0)
function setToolHeight() {
	toolsHeight.value = toolsHeight.value ? 0 : 180
}

const content = ref('')


// #ifndef H5
// 语音
that.recorderManager.onStop(function (res) {
	console.log(res);
})
// #endif

function voice() {
	console.log('xxxxxx');
	// #ifndef H5
		that.recorderManager.start()
		setTimeout(() => {
			that.recorderManager.stop()
		}, 5000)
	// #endif
}

</script>

<style lang="scss">
	@import 'chat.scss'
</style>
